<template>
  <div>
    <button @click="updateState">修改状态</button>
  </div>
</template>

<script>
import { ref, reactive, readonly } from "vue";
export default {
  setup() {
    //1.普通对象
    const info1 = { name: "pengfan" };
    const readonlyInfo1 = readonly(info1);

    //2.响应式的对象
    const info2 = reactive({
      name: "pengfan",
    });
    const readonlyInfo2 = readonly(info2);

    //3.响应式对象ref
    const info3 = ref("pengfan");
    const readonlyInfo3 = readonly(info3)

    const updateState = () => {
      readonlyInfo3.value = "pengyutong";
      // info1.name = "pengyutong";
    };
    return {
      updateState,
    };
  },
};
</script>

<style scoped>
</style>